<template>
  <section class="section">
    <h2 class="section-title">成功案例</h2>
    <div class="projects-grid">
      <article class="project-card">
        <img src="https://images.pexels.com/photos/34234298/pexels-photo-34234298.png?auto=compress&cs=tinysrgb&h=200" alt="金融行业数字化转型项目" class="card-img" @error="handleImageError">
        <div class="card-content">
          <h3>金融行业数字化转型项目</h3>
          <p class="project-meta">客户：某大型商业银行 | 项目周期：18个月</p>
          <p class="project-desc">为客户提供全面的数字化转型解决方案，包括智能风控系统、移动端银行应用和数据分析平台，实现业务流程自动化率提升65%，客户满意度提高40%。</p>
        </div>
      </article>
      <article class="project-card">
        <img src="https://images.pexels.com/photos/34221334/pexels-photo-34221334.png?auto=compress&cs=tinysrgb&h=200" alt="制造业智能制造升级项目" class="card-img" @error="handleImageError">
        <div class="card-content">
          <h3>制造业智能制造升级项目</h3>
          <p class="project-meta">客户：某知名汽车零部件制造商 | 项目周期：24个月</p>
          <p class="project-desc">实施工业物联网平台，构建智能生产监控系统，实现设备故障预测准确率95%以上，生产效率提升30%，年节约成本超2000万元。</p>
        </div>
      </article>
      <article class="project-card">
        <img src="https://images.pexels.com/photos/34206107/pexels-photo-34206107.png?auto=compress&cs=tinysrgb&h=200" alt="零售业全渠道营销系统" class="card-img" @error="handleImageError">
        <div class="card-content">
          <h3>零售业全渠道营销系统</h3>
          <p class="project-meta">客户：某连锁零售企业 | 项目周期：12个月</p>
          <p class="project-desc">打造统一的全渠道营销平台，整合线上线下资源，实现精准用户画像和个性化推荐，销售额同比增长55%，会员复购率提升至68%。</p>
        </div>
      </article>
    </div>
  </section>
</template>

<script setup>
// 成功案例页面
const handleImageError = (event) => {
  event.target.src = 'https://images.pexels.com/photos/3184454/pexels-photo-3184454.jpeg?auto=compress&cs=tinysrgb&h=200'
}
</script>

<style scoped>
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.project-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 1.5rem;
}

.card-content h3 {
  margin-bottom: 0.5rem;
  color: #2c3e50;
}

.project-meta {
  color: #3498db;
  font-weight: 500;
  margin-bottom: 1rem;
}

.project-desc {
  color: #666;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}
</style>